<template>
	<view>
		<cu-custom bgColor="bg-white-nav">
			<block slot="content">{{title}}</block>
		</cu-custom>
		<home v-if="PageCur=='home'"></home>
		<my v-if="PageCur=='my'"></my>
		<!-- 底部tabbar -->
		<view class="box">
			<view class="cu-bar tabbar bg-white shadow foot">
				<view class="action" @click="NavChange" data-cur="home">
					<view class='cuIcon-cu-image'>
						<image v-if="PageCur == 'home'" src="/static/images/tabbar/index_active.png"></image>
						<image v-if="PageCur != 'home'" src="/static/images/tabbar/index.png"></image>
					</view>
					<view :class="PageCur=='home' ? 'color_main':'text-gray'">首页</view>
				</view>

				<view @click="handleAccount" class="action text-gray add-action" data-cur="order">
					<image class="logo_btn" mode="widthFix" src="/static/images/tabbar/order.png"></image>
					<!-- <view :class="PageCur=='order'?'color_main':'text-gray'">开始接单</view> -->
				</view>

				<view class="action" @click="NavChange" data-cur="my">
					<view class='cuIcon-cu-image'>
						<image v-if="PageCur=='my'" src="/static/images/tabbar/my_active.png"></image>
						<image v-if="PageCur != 'my'" src="/static/images/tabbar/my.png"></image>
					</view>
					<view :class="PageCur=='my'?'color_main':'text-gray'">我的</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import home from "@/pages/home/home.vue"; //首页
	import my from "@/pages/my/my.vue"; //我的
	export default {
		components: {
			home,
			my
		},
		data() {
			return {
				PageCur: 'home',
				title: '首页',
				message: '0',
				tip: "我是提示",
				duration: 1

			};
		},
		// 分享小程序
		onShareAppMessage(res) {
			return {
				title: '学技术·找案例，快来「前端铺子」吧！',
				imageUrl: 'https://cdn.zhoukaiwen.com/qdpz_share.jpg',
			};
		},
		onLoad(option) {
			if (option.type == 'matting') {
				uni.navigateTo({
					url: '../main/matting'
				})
				return
			}
		},
		onShareTimeline() {
			return {
				title: '学技术·找案例，快来「前端铺子」吧！',
			}
		},
		onShow() {},
		async onPullDownRefresh() {
			await uni.$u.sleep(1000)
			uni.stopPullDownRefresh()
		},
		methods: {
			ShowNews(e) {
				console.log(e)
				this.PageCur = e;
			},
			handleAccount() {
				uni.navigateTo({
					url: '/pages/my/detection'
				})
			},
			NavChange: function(e) {
				console.log(e.currentTarget.dataset.cur)
				this.PageCur = e.currentTarget.dataset.cur;
				if (this.PageCur == 'home') {
					// document.title = '首页'
					uni.setNavigationBarTitle({
						title: '首页'
					})
					this.title = '首页'
				} else if (this.PageCur == 'component') {
					// document.title = '积分商城'
				} else if (this.PageCur == 'cases') {
					// document.title = '宅家学'
				} else if (this.PageCur == 'news') {
					// document.title = '文章资讯'
				} else if (this.PageCur == 'my') {
					// document.title = '我的'
					uni.setNavigationBarTitle({
						title: '我的'
					})
					this.title = '我的'
				}

				// uni.setStorage({
				// 	key: 'PageCur',
				// 	data: this.PageCur,
				// 	success: function() {
				// 		console.log('保存成功！');
				// 	}
				// });
			},
			NavChange_xd: function() {
				uni.navigateTo({
					url: 'publish',
					animationType: 'slide-in-bottom',
					animationDuration: 200
				});
			}
		}
	}
</script>

<style lang="scss">
	.color_main {
		color: #000000;
		font-weight: 900;
	}

	.box {
		margin: 20upx 0;
	}

	.box view.cu-bar {
		margin-top: 20upx;
	}

	.logo_btn {
		width: 38*2rpx;
		height: 38*2rpx;
		position: absolute;
		z-index: 2;
		border-radius: 50%;
		top: -40rpx;
		left: 0rpx;
		right: 0;
		margin: auto;
		padding: 0;
	}

	.cu-bar.tabbar .action.add-action {
		padding-top: 56rpx !important;
	}
</style>